<template>
	<view class="mian">
		<view class="top_header">咨询排行</view>
		<view class="box">
			<view class="tag" v-for="(item,index) in conx" :key="item.id" @click="mtk(index)">
				<image :src="item.img" mode=""></image>
				<view class="">
					<text>{{item.name}}</text>
				</view>
				<view class="">
					<text>{{item.areaName}}</text>
				</view>
				<view class="">
					0{{index+1}}
				</view>
			</view>
		</view>
		<view class="top_header">金融顾问</view>
		<view class="item" v-for="(item,index) in cony" :key="item.id">
			<view class="item_top">
				<view class="img">
					<image style="width: 100rpx;height: 100rpx;" :src="item.img"></image>
				</view>
				<view style="margin-left: 10rpx;">
					<view class="text">
						{{item.name}}
					</view>
					<view class="subText">
						地区-{{item.areaName}}
					</view>
				</view>
				<view>
				</view>
				<view class="chat">
					<u-button v-if="item.pay" icon="chat" type="primary" shape="circle" text="咨询" @click="toGet(item)"></u-button>
					<u-button v-if="!item.pay" @click="pay(item)" icon="chat" type="warning" shape="circle"
						:text="'咨询¥'+item.prise/100"></u-button>
				</view>
			</view>

			<view class="info">
				<u--text :lines="5" iconStyle="font-size: 16px" :text="item.info"></u--text>
			</view>

		</view>
		<!-- 模态框 -->
		<view v-if="show">
			<view class="zzc"></view>
			<view class="mtk">
				<view @click="show=false">X</view>
				<image :src="conx[a].img" mode="widthFix"></image>
				<view>
					<text>{{conx[a].name}}</text>
				</view>
				<view>
					<text>{{conx[a].areaName}}</text>
				</view>
				<view>
					<text>{{conx[a].info}}</text>
				</view>
				<view class="chat">
					<u-button v-if="conx[a].pay" icon="chat" type="primary" shape="circle" text="咨询" @click="toGet(conx[a])"></u-button>
					<u-button v-if="!conx[a].pay" @click="pay(conx[a])" icon="chat" type="warning" shape="circle"
						:text="'咨询¥'+conx[a].prise/100"></u-button>
				</view>
			</view>
		</view>
		<!-- 二维码 -->
		<u-popup :show="Qrshow" mode="center" :round="10" bgColor='transparent' zIndex='10075' @close="Qrclose"
			@touchmove.stop.prevent="moveHandle">
			<view class="box-img">
				<image src="https://img.wilmer.com.cn/admin/2024/4-3/1.jpg" mode=""></image>
				<image @click="handleLongPress" style="width: 280rpx;height: 280rpx;" :src="qrCode" mode="">
				</image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getArea,
		getCon,
		payCon,
		consultants
	} from '@/api/system/bank_request.js'
	export default {
		data() {
			return {
				a: '',
				show: false,
				areaId: '',
				cons: [],
				conx: [],
				cony: [],
				payForm: {
					code: '',
					prise: '',
					conId: ''
				},

				Qrshow: false,
				qrCode: '',
			}
		},
		onLoad(options) {
			this.areaId = options.areaId
			this.getList()
		},
		onShow() {
			// 页面显示时触发
			this.getList()
		},
		methods: {
			toGet(a){
				console.log(a);
				this.Qrshow = true
				consultants(a.id).then(ren => {
					console.log(ren);
					this.qrCode = ren.data.qrcode
					// this.Qrshow = true
				})
			},
			moveHandle() {
				return false;
			},
			Qrclose() {
				this.Qrshow = false
			},
			handleLongPress(e) {
				uni.previewImage({
					urls: [this.detal.qrCode],
					current: 0,
					indicator: 'default',
					loop: false,
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						console.log('err', err);
					}
				});
			},

			mtk(i) {
				this.show = true
				this.a = i
			},
			getList() {
				this.$modal.loading("加载中")
				getCon({
					areaId: this.areaId
				}).then(res => {
					this.cons = res.rows;
					this.conx = this.cons.slice(0, 3)
					this.cony = this.cons.slice(3, res.lenght)
					this.$modal.closeLoading()
				})
			},
			pay(item) {
				this.payForm.conId = item.id
				this.payForm.prise = item.prise
				this.$modal.loading("加载中")
				let that = this
				uni.login({
					"provider": "weixin",
					success: (res) => {
						setTimeout(() => {
							uni.hideLoading();
						}, 500)
						this.payForm.code = res.code

						payCon(that.payForm).then(res => {
							// 参考示例。
							let sign = JSON.parse(res.data);
							console.log(sign)
							// that.orderNumber = res.data.orderNumber		
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: sign.timeStamp,
								nonceStr: sign.nonceStr,
								package: sign.package,
								signType: sign.signType,
								paySign: sign.paySign,
								success: function(res) { // 支付成功的回调
									that.getList()
									consultants(that.payForm.conId).then(ren => {
										that.qrCode = ren.data.qrcode
										that.Qrshow = true
									})

								},
								fail: function(err) { // 用户取消支付的回调
									// console.log('fail:' + JSON.stringify(err));
									uni.showToast({
										title: '你已取消支付',
										icon: 'none'
									})
								}
							});

						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.info {
		margin-top: 10rpx;
	}

	.chat {
		width: 192rpx;
		height: 80rpx;
		margin-top: 10rpx;
		margin-left: auto;
	}

	.item_top {
		display: flex;

		.img {
			width: 100rpx;
			height: 100rpx;
			background-color: #9B9B9B40;
			float: left;
		}

		.text {
			margin-top: 8rpx;
			font-size: 40rpx;
			font-weight: 500;
			line-height: 48rpx;
			letter-spacing: 0.03em;
			text-align: center;

		}

		.subText {
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 28rpx;
			letter-spacing: 0.03em;
			margin-top: 14rpx;

		}
	}

	.mian {
		min-height: 100vh;
		background-color: #FFF;
		padding-left: 32rpx;
		padding-right: 32rpx;

	}

	.top_header {
		font-size: 40rpx;
		font-weight: 500;
		line-height: 48rpx;
		padding-top: 20rpx;
	}

	.item {
		padding: 20rpx;
		border-radius: 8rpx;
		height: 340rpx;
		margin-top: 20rpx;


		gap: 0rpx;
		opacity: 0rpx;
		box-shadow: 0px 0px 6px 0px #9B9B9B40;


	}


	// 111111



	.box {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;

		.tag {
			width: 30%;
			border-radius: 18rpx;
			border: 1px solid #ccc;
			text-align: center;
			padding-top: 24rpx;
			padding-bottom: 14rpx;

			image:nth-child(1) {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 24rpx;
			}

			view:nth-child(2) {
				margin-bottom: 12rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
			}

			view:nth-child(3) {
				margin-bottom: 14rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			view:nth-child(4) {
				font: Racing Sans One;
				font-size: 60rpx;
				color: #319AF5;
			}
		}
	}


	.zzc {
		background-color: #ccc;
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.7;
	}

	.mtk {
		background-color: #fff;
		width: 80%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 16rpx;
		text-align: center;
		padding: 0 34rpx;

		view:nth-child(1) {
			text-align: right;
			margin-top: 20rpx;
		}

		image:nth-child(2) {
			width: 100rpx;
			margin-bottom: 24rpx;
		}

		view:nth-child(3) {
			margin-bottom: 12rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #333333;
		}

		view:nth-child(4) {
			margin-bottom: 14rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		view:nth-child(5) {
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666666;
			margin-top: 32rpx;
			margin-bottom: 120rpx;
		}

		.chat {
			width: 192rpx;
			height: 80rpx;
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translateX(-50%);
		}

	}

	.box-img {
		width: 480rpx;
		height: 368rpx;
		overflow: hidden;
	}

	.box-img image:nth-child(1) {
		width: 480rpx;
		height: 368rpx;
	}

	.box-img image:nth-child(2) {
		position: absolute;
		left: 50%;
		z-index: 999;
		transform: translateX(-50%);
		margin-top: 10rpx;
	}
</style>